<!-- 状态布局2,解决在同一个网页id相同问题-->
<style>
  .status-layout {
    padding: 48px;
    display: none;
    text-align: center;
  }

  .empty-layout_image {
    width: 64px;
    height: 64px;
    display: inline-block;

  }

  .empty-layout_text {
    font-size: 16px;
    color: #646464;
    text-align: center;
  }

  .error-layout {
    padding: 48px;
    text-align: center;
    display: none;
  }

  .error-layout_image {
    width: 64px;
    height: 64px;
    display: inline-block;

  }

  .error-layout_text {
    font-size: 14px;
    color: #909090;
    text-align: center;
  }

  .loader,
  .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
  }

  .loader {
    margin: 8px auto;
    font-size: 2px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(255, 255, 255, 0.2);
    border-right: 1.1em solid rgba(255, 255, 255, 0.2);
    border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
    border-left: 1.1em solid #646464;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
  }

  @-webkit-keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes load8 {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  .loading-layout {
    padding: 48px;
    display: none;
  }

  .loading-layout_text {
    margin-top: 8px;
    font-size: 14px;
    color: #646464;
    text-align: center;
  }
</style>

<div class="status-layout" id="loadingLayout2">
  <div class="loader"></div>
  <p class="loading-layout_text" id="loadingText2">加载中...</p>
</div>

<div class="status-layout" id="emptyLayout2">
  <img class="empty-layout_image"
    src=""
    alt="" id="emptyIcon2">
  <p class="empty-layout_text" id="emptyText2">暂无数据</p>
</div>

<div class="status-layout" id="errorLayout2">
  <img class="error-layout_image"
    src=""
    alt="" id="errorIcon2">
  <p class="error-layout_text" id="errorText2">加载失败,点击请重试</p>
</div>

<div id="contentLayout2" class="display:block;"></div>

<script type="text/javascript">
  function showLoading(text) {
    $('#loadingText2').text(text || "加载中...");
    $('#loadingLayout2').show();
    $('#emptyLayout2').hide();
    $('#errorLayout2').hide();
    $('#contentLayout2').hide();
  }

  function showEmptyData(icon, text) {
    if (text != null && text != undefined && text != '') {
      $('#emptyText2').text(text);
    }
    if (icon != null && icon != undefined && icon != '') {
      $('#emptyIcon2').attr('src', icon);
    }
    $('#emptyLayout2').show();
    $('#loadingLayout2').hide();
    $('#errorLayout2').hide();
    $('#contentLayout2').hide();
  }

  function showError(handler, icon, text) {
    if (text != null && text != undefined && text != '') {
      $('#errorText2').text(text);
    }
    if (icon != null && icon != undefined && icon != '') {
      $('#errorIcon2').attr('src', icon);
    }
    $('#errorLayout2').show();
    $('#loadingLayout2').hide();   
    $('#emptyLayout2').hide();
    $('#contentLayout2').hide();
    $('#errorLayout2').click(function (e) {
      if (!e.isPropagationStopped()) { //确定stopPropagation是否被调用过
        $('#errorLayout2').hide();
        $('#loadingLayout2').show();
        if (handler) handler();
      }
      e.stopPropagation(); //必须要，不然e.isPropagationStopped()无法判断stopPropagation是否调用过
    });
  }

  function showContent(data, isAppend) {
    $('#contentLayout2').show();
    $('#loadingLayout2').hide();
    $('#emptyLayout2').hide();
    $('#errorLayout2').hide();
    if (isAppend) {
      $('#contentLayout2').append(data);
    } else {
      $('#contentLayout2').html(data);
    }

  }
</script>